<template>
  <div class="person-info">
    <el-form
      ref="formRef"
      :model="form"
      label-width="66px"
      :rules="rules"
      status-icon
      :inline="true"
    >
      <el-form-item label="姓名" class="item" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="性别" class="item" prop="gender">
        <el-select
          v-model="form.gender"
          placeholder="please select your gender"
          style="width: 194px"
        >
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="邮件" class="item" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="手机号" class="item" prop="telephone">
        <el-input v-model.number="form.telephone" />
      </el-form-item>
      <el-form-item label="地址" class="item" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="座右铭" class="item" prop="motto">
        <el-input v-model="form.motto" />
      </el-form-item>
      <el-form-item label="技能" class="item" prop="skill">
        <el-input v-model="form.skill" />
      </el-form-item>
      <el-form-item label="学校" class="item" prop="school">
        <el-input v-model="form.school" />
      </el-form-item>
      <el-form-item label="简介" class="item" prop="briefIntroduction">
        <el-input v-model="form.briefIntroduction" type="textarea" :rows="4" />
      </el-form-item>
      <div style="margin-left: 66px">
        <el-button type="primary" @click="onSave">Save</el-button>
        <el-button @click="clearValidate">ClearValidate</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineProps, watch, defineEmits } from 'vue'
import { updateCurrentUserInfo } from '@/api/personInfoManager.js'
import { ElMessage } from 'element-plus'

const emits = defineEmits(['initUserInfo'])

const form = ref({
  username: '',
  gender: '',
  email: '',
  telephone: '',
  address: '',
  briefIntroduction: ''
})

const formRef = ref(null)

const props = defineProps({
  currentUserInfo: {
    type: Object,
    required: true,
    default: () => {}
  }
})

watch(
  () => props.currentUserInfo,
  () => {
    form.value = props.currentUserInfo
  },
  {
    deep: true,
    immediate: true
  }
)

const checkPhone = (rules, value, callback) => {
  if (value === '') {
    return callback(new Error('请输入手机号'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('请输入数字'))
    } else if ((value + '').length !== 11) {
      callback(new Error('请输入11位数字'))
    } else {
      callback()
    }
  }, 1000)
}

const rules = ref({
  username: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择用户性别', trigger: 'blur' }],
  email: [
    {
      required: true,
      message: 'Please input email address',
      trigger: 'blur'
    },
    {
      type: 'email',
      message: 'Please input correct email address',
      trigger: ['blur', 'change']
    }
  ],
  telephone: [{ validator: checkPhone, trigger: 'blur' }],
  skill: [{ required: true, message: '请输入技能', trigger: 'blur' }],
  school: [{ required: true, message: '请输入学校', trigger: 'blur' }],
  motto: [{ required: true, message: '请输入座右铭', trigger: 'blur' }],
  address: [{ required: true, message: '请输入用户地址', trigger: 'blur' }],
  briefIntroduction: [
    { required: true, message: '请输入个人简介', trigger: 'blur' }
  ]
})

const clearValidate = () => {
  // clearValidate方法用来清除验证信息而不是清空输入值
  formRef.value.clearValidate()
}

const onSave = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await updateCurrentUserInfo(form.value)
        ElMessage({
          type: 'success',
          duration: 1500,
          message: '更新成功'
        })
        emits('initUserInfo')
      } catch (error) {
        ElMessage({
          type: 'error',
          duration: 1500,
          message: error
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
/* :deep(.el-input__inner) {
  width: 330px;
} */

.person-info {
  min-width: 260px;
  margin: 15px 0px;
  .item {
    margin: 15px 0px;
    margin-right: 10px;
  }
}
</style>
